<template>
	<statusBarVue title="技能列表" :isShowBar="true" :isShowLeft="true" :isMyBgi="true" />
	<view class="skills-page" :style="pageHaveBarStyle">
		<!-- <view class="skills-page-group" v-for="(v, i) in skillsList" :key="'skills-' + i"  v-if="skillsList.length">
			<view class="tit">
				<view class="tit-text">
					{{v.name}}
				</view>
				<button class="add-btn">添加</button>
			</view>
			<view class="content">
				{{v.describe}}
			</view>
		</view> -->
		<view class="skills-page-group" v-if="skillsList.length">
			<uni-collapse ref="collapse" v-model="value">
				<uni-collapse-item :title="v.key" v-for="(v, i) in skillsList" :key="'skills-' + i">
					<view class="content">
						<view class="text" v-for="(vv, ii) in v.value">{{
						vv.value
					}}</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<emptyVue v-else />
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';
	import emptyVue from '@/components/empty.vue';

	import {
		publics
	} from '@/mixins/publics.js';

	import {
		getSkillsList
	} from "@/utils/api";

	export default {
		mixins: [publics],
		components: {
			emptyVue,
			statusBarVue
		},
		data() {
			return {
				value: '',
				skillsList: []
			}
		},
		onShareAppMessage(){
			// 监听用户右上角的转发
		},
		onShareTimeline(){
			// 监听用户右上角的分享到朋友圈
		},
		onShow() {
			this.getSkillsListApi()
		},
		methods: {
			getSkillsListApi(e) {
				getSkillsList().then(res => {
					// if (res.code === 200) {
					this.skillsList = res.skills
					// }
				})
			},
		}
	}
</script>

<style lang="scss">
	.skills-page {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #F2F3F7;
		padding: 10px 0;
		box-sizing: border-box;
		z-index: 99;


		&-group {
			width: 94.67%;
			height: 184rpx;
			// background-color: #fff;
			margin-bottom: 20rpx;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			margin: auto;

			.content {
				padding: 0rpx 38rpx;

				.text {
					font-size: 28rpx;
					margin-bottom: 8rpx;
					padding: 8rpx 0;
					border-bottom: 1px solid #F2F3F7;
				}
			}

			.tit {
				display: flex;
				justify-content: space-between;
				align-items: center;

				&-text {
					height: 40rpx;
					font-family: PingFangSC-Semibold;
					font-weight: 600;
					font-size: 28rpx;
					color: #1E1F23;

					&::before {
						display: inline-block;
						content: " ";
						width: 6rpx;
						height: 22.22rpx;
						background: #22A366;
						border-radius: 4rpx;
						margin-right: 8rpx;
					}
				}

				.add-btn {
					width: 110rpx;
					height: 37.78rpx;
					line-height: 37.78rpx;
					background: #F5F6FA;
					border: 2rpx solid #22A366;
					border-radius: 24rpx;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 24rpx;
					padding: 0;
					margin: 0;
					color: #22A366;
				}
			}

			.content {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 24rpx;
				color: #696969;
				margin-top: 8rpx;
			}
		}
	}
</style>